<template>
    <div>
        <el-dialog :visible="dialogVisible" width="1280px" title="添加共享单车停放点" :before-close="handleClosed">
            <el-row>
                <el-col :span="6">
                    <div class="info">
                        <div class="parkNameLable">站点名称</div>
                        <el-input v-model="paramInfo.parkName" placeholder=""></el-input>
                    </div>
                    <div class="info">
                        <el-row>
                            <el-col :span="17">
                                <el-input v-model="paramInfo.cityCode" placeholder=""></el-input>
                            </el-col>
                            <el-col :span="7">
                                <span class="lable">城市代码</span>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="info">
                        <el-row>
                            <el-col :span="17">
                                <el-input v-model="paramInfo.reginId" placeholder=""></el-input>
                            </el-col>
                            <el-col :span="7">
                                <span class="lable">区域编号</span>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="info">
                        <el-row>
                            <el-col :span="17">
                                <el-input v-model="paramInfo.lat" placeholder=""></el-input>
                            </el-col>
                            <el-col :span="7">
                                <span class="lable">经度</span>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="info">
                        <el-row>
                            <el-col :span="17">
                                <el-input v-model="paramInfo.lng" placeholder=""></el-input>
                            </el-col>
                            <el-col :span="7">
                                <span class="lable">纬度</span>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="footer" style="display: flex;" @click="savingClick">
                        <el-button type="primary">保存</el-button>
                    </div>
                </el-col>
                <el-col :span="17">
                    <div class="search-box">
                        <el-input clearable v-model="keyword" placeholder="请输入要投放的区位信息" style="width: 300px;"></el-input>

                    </div>
                    <baidu-map class="map" :scroll-whell-zoom="true" style="width: 100%;" :scroll-wheel-zoom="true" @ready="handle"
                               @click="getClickInfo" :center="center" :zoom="18">
                        <!-- 城市列表 -->
                        <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
                        <!-- 比例尺 -->
                        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
                        <bm-local-search :panel="false" :keyword="keyword" :auto-viewport="true" :location="location"></bm-local-search>
                        <bm-marker :position="center" :dragging="true" @dragend="syncEnd"
                                   :icon="{ url: markerIcon, size: { width: 40, height: 50 } }"></bm-marker>
                    </baidu-map>
                </el-col>
            </el-row>

        </el-dialog>
    </div>
</template>

<script>
import API from "@/utils/request";

export default {
    props: ['visible'],
    emits: ['callClosed', 'callSaveSuccess'],
    data() {
        return {
            dialogVisible: false,
            markerIcon: require("@/assets/img/icon/icon_bycicle_park.png"),
            paramInfo: {
                parkName: "",
                address: "",
                cityCode: "320412",
                reginId: "",
                lat: "",
                lng: ""
            },
            location:'常州',
            keyword:'',
            center: {
                lat: "31.669562820254672", lng: "119.96263298803699"
            },
            map:null,
        }
    },
    watch: {
        'visible'(val) {
            this.dialogVisible = val;
        }
    },
    methods: {
        getClickInfo(e) {
            console.log(e, "e-->>>>");
            // 创建地理编码实例
            // eslint-disable-next-line no-undef
            // const myGeo = new BMap.Geocoder();
            // // 根据坐标逆解析地址
            // // eslint-disable-next-line no-undef
            // myGeo.getLocation(new BMap.Point(e.point.lng, e.point.lat), (result) => {
            //     console.log(result, "result-->>>>");
            //     if (result) {
            //         this.address = result.address;
            //     }
            // });
            this.paramInfo.lng = e.point.lng;
            this.paramInfo.lat = e.point.lat;
            //移动中心点
            // eslint-disable-next-line no-undef
            this.center.lat = e.point.lat;
            this.center.lng = e.point.lng;

            this.paramInfo.address = e.target.qh;
        },
        handle(){
        },
        syncEnd(data){
            this.paramInfo.lng = data.point.lng;
            this.paramInfo.lat = data.point.lat;
        },
        savingClick() {
            //TODO: 存储共享单车停放点
            API.addPark(this.paramInfo, res => {
                if (res.code === 200) {
                    this.$message({
                        message: '保存成功',
                        type: 'success'
                    });
                    this.$emit('callSaveSuccess');
                }
            })
        },
        handleClosed(){
            this.$emit('callClosed');
        }
    }
}
</script>

<style scoped>
.map {
    margin-left: 30px;
    height: 400px;
}
.search-box{
    position: absolute;
    top: 10px;
    z-index: 10;
    left: 74%;
    transform: translateX(-50%);
}
.parkNameLable {
    font-size: 17px;
    text-align: left;
    color: rgb(0, 119, 255);
    font-weight: 700;
    margin-top: 5px;
    margin-bottom: 5px;
}

.lable {
    color: rgb(201, 201, 201);
    font-size: 17px;
    line-height: 45px;
    margin-left: 10px;
    text-align: center;
}
</style>